<template>
  <div class="goodsItem">
    <img :src="goodsItem.goods_small_logo" alt="">
    <div class="goodsInfo">
        <p>{{goodsItem.goods_name}}</p>
        <span class="price">￥{{goodsItem.goods_price}}</span>
        <span>☆</span>
        <span class="collect">{{goodsItem.goods_id}}</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'GoodsItem',
    props:{
        goodsItem:{
            type:Object,
            default(){
                return {}
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.goodsItem{
    padding-bottom: 40px;
    position: relative;
    width: 47%;
    background-color: #fff;
    
    border: 4px solid #eee;
    img{
        width: 100%;
        border-radius: 5px;
    }
    .goodsInfo{
        font-size: 13px;
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        overflow: hidden;
        text-align: center;
        p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 3px;
        }
        .price{
            color: rgb(217, 90, 126);
            margin-right: 20px;
        }
        .collect{
  
            margin-left: 5px;
        }
    }
}
</style>